import React, { memo } from "react"
import type { ReactNode } from "react"
import { formatImageUrl } from "@/utils/format"
import "./index.less"
import { useDispatch } from "react-redux"
import { fetchCurrentSong, fetchSongList } from "@/layout/AppPlayer/store"
interface Iprops {
	children?: ReactNode
	itemData: any
}
const RankItem: React.FC<Iprops> = (props) => {
	const { itemData } = props
	const { tracks = [] } = itemData
	const dispatch = useDispatch()
	const handlePlayClick = (id: number) => {
		dispatch(fetchCurrentSong(id) as any)
	}
	const handlePlayList = () => {
		dispatch(fetchSongList(tracks) as any)
	}
	return (
		<div className="rankItemContainer">
			<div className="header">
				<div className="image">
					<img src={formatImageUrl(itemData.coverImgUrl, 80)} alt="" />
					<a href="" className="sprite_cover"></a>
				</div>
				<div className="info">
					<div className="name">{itemData.name}</div>
					<div>
						<button className="sprite_02 btn play" onClick={handlePlayList}></button>
						<button className="sprite_02 btn favor"></button>
					</div>
				</div>
			</div>
			<div className="list">
				{tracks.slice(0, 10).map((item: any, index: number) => {
					return (
						<div className="item" key={item.id}>
							<div className="index">{index + 1}</div>
							<div className="info">
								<div className="name">{item.name}</div>
								<div className="operator">
									<button className="btn sprite_02 play" onClick={() => handlePlayClick(item.id)}></button>
									<button className="btn sprite_icon2 add"></button>
									<button className="btn sprite_02 favor"></button>
								</div>
							</div>
						</div>
					)
				})}
			</div>
			<div className="footer">
				<a href="#/discover/ranking">查看全部 &gt;</a>
			</div>
		</div>
	)
}

export default memo(RankItem)
